import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MessageService } from 'primeng/api';
import { GraphConfigService } from '../../graph-config.service';
import { ScenarioConfig } from '../../models';
import { MonitorBoardNode } from '../../nodes/MonitorBoardNode';
import { PiplineNode } from '../../nodes/PiplineNode';
import { RgvNode } from '../../nodes/RgvNode';
import { SiteNode } from '../../nodes/SiteNode';
import { SrmNode } from '../../nodes/SrmNode';
import { ScenarioService } from '../../scenario.service';
import { InfoSidebar } from '../InfoSidebar';
import { ScenarioMonitorGraphService } from '../scenario-monitor-graph.service';
import { MonitorBoardInfoComponent } from './monitor-board-info/monitor-board-info.component';
import { PiplineInfoComponent } from './pipline-info/pipline-info.component';
import { RgvInfoComponent } from './rgv-info/rgv-info.component';
import { SiteInfoComponent } from './site-info/site-info.component';
import { SrmInfoComponent } from './srm-info/srm-info.component';

@Component({
  selector: 'app-scenario-monitor',
  templateUrl: './scenario-monitor.component.html',
  styleUrl: './scenario-monitor.component.scss',
  providers: [
    ScenarioMonitorGraphService,
    GraphConfigService,
  ]
})
export class ScenarioMonitorComponent implements OnInit, AfterViewInit, OnDestroy {
  scenario!: ScenarioConfig;
  @ViewChild("graphContainer", { static: true })
  graphContainer!: ElementRef;
  currentColumn: number = 1;

  @ViewChild("piplineInfo", { static: true })
  piplineInfo!: PiplineInfoComponent;
  @ViewChild("siteInfo", { static: true })
  siteInfo!: SiteInfoComponent;
  @ViewChild("srmInfo", { static: true })
  srmInfo!: SrmInfoComponent;
  @ViewChild("boardInfo", { static: true })
  boardInfo!: MonitorBoardInfoComponent;
  @ViewChild("rgvInfo", { static: true })
  rgvInfo!: RgvInfoComponent;

  currentSidebar?: InfoSidebar;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private service: ScenarioService,
    private graphService: ScenarioMonitorGraphService
  ) { }

  ngOnInit(): void { }

  async ngAfterViewInit() {
    this.graphService.nodeSelected.subscribe(node => {

      if (node instanceof PiplineNode) {
        this.currentSidebar?.onSidebarHide();
        this.currentSidebar = this.piplineInfo;
        this.piplineInfo.onShow(node.data.cfg, node);
      } else if (node instanceof SiteNode) {
        this.currentSidebar?.onSidebarHide();
        this.currentSidebar = this.siteInfo;
        this.siteInfo.onShow(node.data.cfg, node);
      } else if (node instanceof SrmNode) {
        this.currentSidebar?.onSidebarHide();
        this.currentSidebar = this.srmInfo;
        this.srmInfo.onShow(node.data.cfg, node);
      } else if (node instanceof MonitorBoardNode) {
        this.currentSidebar?.onSidebarHide();
        this.currentSidebar = this.boardInfo;
        this.boardInfo.onShow(node.data.cfg, node);
      } else if (node instanceof RgvNode) {
        this.currentSidebar?.onSidebarHide();
        this.currentSidebar = this.rgvInfo;
        this.rgvInfo.onShow(node.data.cfg, node);
      }
    });
    this.graphService.registerTypes();
    await this.graphService.init(this.graphContainer.nativeElement);
    this.route.params.subscribe(params => {
      const { id } = params;
      this.service.get(id).subscribe(async (item) => {
        this.scenario = item;
        await this.graphService.loadScenario(item);
      });
    });
  }
  async ngOnDestroy() {
    await this.graphService.UnMonitorScenario();
    this.graphService.unregisterTypes();
  }

  onEditScenario() {
    this.router.navigate(['/scenarios', 'design', this.scenario.Id]);
  }

  onSrmUpdateDemo() {
    const column = Math.floor(Math.random() * 40) + 1;
    this.graphService.updateSrmColumn(column);
  }

  onColumnSlideEnd() {
    this.graphService.updateSrmColumn(this.currentColumn);
  }

  onReloadScenario() {
    this.graphService.reload();
  }

  onUnloadScenario() {
    this.graphService.UnloadScenario().then(() => {
      this.router.navigate(['/scenarios', 'list']);
    });
  }

  get canResetViewport() {
    const key = `View${this.scenario?.Id}`;
    const json = localStorage.getItem(key);
    if (json) {
      return true;
    }
    return false;
  }
  onResetViewport() {
    this.graphService.clearViewport();
  }

}
